<template>
  <div class="admin-maintainer">
    <div class="maintainer-search">
      <el-input placeholder="请输入用户名..." v-model="searchInput">
        <template slot="append">
          <el-button>搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="maintainer-table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="index" label="序号">
        </el-table-column>
        <el-table-column prop="id" label="维修员ID">
        </el-table-column>
        <el-table-column prop="maintainer_email" label="用户名">
        </el-table-column>
        <el-table-column prop="nickname" label="姓名">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.$index,scope.row.id)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="handkeEdit(scope.$index,scope.row.id)">操作</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="dialog_info">
          <ul>
            <li class="content_item"><i>ID：</i><span>{{ itemData.id }}</span></li>
            <li class="content_item"><i>状态：</i><span>{{ itemData.status }}</span></li>
            <li class="content_item"><i>账号：</i><span>{{ itemData.maintainer_email }}</span></li>
            <li class="content_item"><i>姓名：</i><span>{{ itemData.nickname }}</span></li>
            <li class="content_item"><i>手机号：</i><span>{{ itemData.phone }}</span></li>
            <li class="content_item"><i>性别：</i><span>{{ itemData.gender }}</span></li>
            <li class="content_item"><i>年龄：</i><span>{{ itemData.age }}</span></li>
            <li class="content_item"><i>服务地区：</i><span>{{ itemData.service_address }}</span></li>
            <li class="content_item"><i>服务类型：</i><span>{{ itemData.service_type }}</span></li>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer" v-if="isEdit">
          <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="handlePass(itemData.id)" size="mini">审核通过</el-button>
          <el-button type="danger" @click="handleReject(itemData.id)" size="mini">重置密码</el-button>
          <p><i>*重置密码为‘123456’，请谨慎操作！</i></p>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAllMaintainerInfoService, checkmaintainerService, resetPwdService } from '@/api/admin'
export default {
  data () {
    return {
      searchInput: '',
      tableData: [],
      itemData: {},
      dialogVisible: false,
      isEdit: false
    }
  },
  created () {
    this.getAllMaintainerInfo()
  },
  methods: {
    async getAllMaintainerInfo () {
      const res = await getAllMaintainerInfoService()
      res.data.forEach((item, index, arr) => {
        arr[index].index = index + 1
        arr[index].status = arr[index].status === '0' ? '正常' : '待审核'
      })
      this.tableData = res.data
    },
    handleClose (done) {
      done()
    },
    handleClick (index) {
      this.itemData = this.tableData[index]
      this.dialogVisible = true
    },
    handkeEdit (index, id) {
      this.itemData = this.tableData[index]
      this.dialogVisible = true
      this.isEdit = true
    },
    handlePass (id) {
      this.$confirm('确认通过吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // TODO: 调用接口
          await checkmaintainerService(id, 0)
          this.$message({
            type: 'success',
            message: '审核通过'
          })
          this.dialogVisible = false
          this.getAllMaintainerInfo()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async handleReject (id) {
      await resetPwdService(id, '2').then(res => {
        if (res.status === 0) {
          this.$message({
            message: '重置密码成功',
            type: 'success'
          })
          this.drawer = false
        } else {
          this.$message({
            message: '重置密码失败',
            type: 'error'
          })
        }
      })
    }
  }
}

</script>

<style lang="less" scoped>
.admin-maintainer{
    width: 100%;
    height: 100%;
    background: #fff;
    .maintainer-search{
        padding: 20px 20px 0px 20px;
        width: 50%;
    }
    .maintainer-table{
        margin-top: 20px;
        padding: 20px;
        width: 100%;
    }
    .dialog{
      .dialog_info{
        li{
          margin: 10px;
          span{
            margin-left: 10px;
            font-size: 14px;
            font-weight: 700;
          }
        }
      }
      i{
        color: #ccc;
        font-size:10px;
      }
    }
}
</style>
